import Title from "../../components/Title/Title";
import "./addbtn.less";
import {
  getGoodsClassify,
  editgoodsclassify,
  addgoodsclassify,
  delgoodsclassify,
} from "../../api/goods";
import React, { useState, useEffect } from "react";
import { Table, Pagination, Button, Switch, Modal, Input } from "antd";

// const GoodsSort = () => {
//   const [data, setData] = useState([]);
//   const [currentPage, setCurrentPage] = useState(1);
//   const [pageSize, setPageSize] = useState(6);
//   const [editingItem, setEditingItem] = useState(null);
//   const [editModalVisible, setEditModalVisible] = useState(false);
//   const [editedCateName, setEditedCateName] = useState("");
//   const [editedState, setEditedState] = useState(false); // Added state for edited state
//   const [isAddMode, setIsAddMode] = useState(false); // New state for mode

//   const columns = [
//     {
//       title: "序号",
//       dataIndex: "id",
//     },
//     {
//       title: "分类名称",
//       dataIndex: "cateName",
//     },
//     {
//       title: "是否启用",
//       dataIndex: "state",
//       render: (text, record) => (
//         <Switch
//           checked={record.state === 1}
//           onChange={(checked) => handleSwitchChange(record, checked)}
//         />
//       ),
//     },
//     {
//       title: "操作",
//       dataIndex: "id",
//       render: (text, record) => (
//         <>
//           <Button onClick={() => handleEdit(record)}>编辑</Button>
//           <Button
//             type="primary"
//             danger
//             onClick={() => {
//               handeldelgoodsclassify({ id: record.id });
//             }}
//           >
//             删除
//           </Button>
//         </>
//       ),
//     },
//   ];
//   const handeldelgoodsclassify = async (id) => {
//     try {
//       const res = await delgoodsclassify(id);
//       console.log(res.data);
//       if (res.data.code === 0) {
//         // 使用过滤函数来删除对应的数据项
//         const newData = data.filter((item) => item.id !== id);

//         setData(newData);
//         fetchData();
//       }
//     } catch (error) {
//       console.error("Failed to delete goods:", error);
//     }
//   };

//   const handleEdit = (record) => {
//     setEditingItem(record);
//     setEditedCateName(record.cateName);
//     setEditedState(record.state === 1);
//     setIsAddMode(false); // Set mode to edit
//     setEditModalVisible(true);
//     fetchData();
//   };
//   const handleAdd = () => {
//     setEditedCateName("");
//     setEditedState(false);
//     setIsAddMode(true); // Set mode to add
//     setEditModalVisible(true);
//   };
//   const handleSave = async () => {
//     if (isAddMode) {
//       await handleAddClassify();
//     } else {
//       await handleSaveEdit();
//     }
//   };
//   const handleSwitchChange = async (record, checked) => {
//     try {
//       const res = await editgoodsclassify({
//         id: record.id,
//         cateName: record.cateName,
//         state: checked ? 1 : 0,
//       });
//       const updatedData = data.map((item) => {
//         if (item.id === record.id) {
//           return { ...item, state: checked ? 1 : 0 };
//         }
//         return item;
//       });
//       setData(updatedData);
//       console.log(res.data);
//     } catch (error) {
//       console.error(error);
//     }
//   };

//   const handleSaveEdit = async () => {
//     try {
//       let res = await editgoodsclassify({
//         id: editingItem.id,
//         cateName: editedCateName,
//         state: editedState ? 1 : 0,
//       });
//       setEditModalVisible(false);
//       console.log(res.data);
//       fetchData();
//     } catch (error) {
//       console.error(error);
//     }
//   };
//   const handleModalClose = () => {
//     setEditModalVisible(false);
//     setEditedCateName("");
//     setEditedState(false);
//     setIsAddMode(false);
//   };

//   const handleAddClassify = async () => {
//     try {
//       const res = await addgoodsclassify({
//         cateName: editedCateName,
//         state: editedState ? 1 : 0,
//       });
//       console.log(res.data);
//       if (res.data.code===0) {
//         const newData = [...data, res.data.data];
//         setData(newData);
//         handleEdit(res.data.data); // Open modal after successful addition
//         handleModalClose();
//       }
//     } catch (error) {
//       console.error(error);
//     }
//   };

//   const onChange = (pagination, filters, sorter, extra) => {
//     console.log("params", pagination, filters, sorter, extra);
//   };

//   const fetchData = async () => {
//     try {
//       const res = await getGoodsClassify({ currentPage, pageSize });
//       if (Array.isArray(res.data.data)) {
//         setData(res.data.data);
//         console.log(res.data);
//       }
//     } catch (error) {
//       console.error(error);
//     }
//   };
//   useEffect(() => {
//     fetchData();
//   }, [currentPage, pageSize]);

//   return (
//     <>
//       <Title title="商品分类">
//         <Button
//           type="primary"
//           slot="do"
//           onClick={() => setEditModalVisible(true)}
//         >
//           添加分类
//         </Button>
//       </Title>

//       <Table
//         className="table1"
//         columns={columns}
//         dataSource={data}
//         onChange={onChange}
//         pagination={false}
//       />

//       <div className="page2">
//         <Pagination
//           current={currentPage}
//           total={500}
//           onChange={(page) => setCurrentPage(page)}
//         />
//       </div>

//       <Modal
//         title={isAddMode ? "添加分类" : "编辑分类"}
//         visible={editModalVisible}
//         onOk={handleSave}
//         onCancel={handleModalClose}
//       >
//         <Input
//           value={editedCateName}
//           onChange={(e) => setEditedCateName(e.target.value)}
//           placeholder="分类名称"
//         />
//         <Switch
//           checked={editedState}
//           onChange={(checked) => setEditedState(checked)}
//           checkedChildren="启用"
//           unCheckedChildren="禁用"
//         />
//         <Button onClick={handleSave}>{isAddMode ? "确认添加" : "保存修改"}</Button>
//       </Modal>
//     </>
//   );
// };

// export default GoodsSort;

const GoodsSort = () => {
  const [data, setData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(6);
  const [editingItem, setEditingItem] = useState(null);
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [editedCateName, setEditedCateName] = useState("");
  const [editedState, setEditedState] = useState(false); // Added state for edited state

  const columns = [
    {
      title: "序号",
      dataIndex: "id",
    },
    {
      title: "分类名称",
      dataIndex: "cateName",
    },
    {
      title: "是否启用",
      dataIndex: "state",
      render: (text, record) => (
        <Switch
          checked={record.state === 1}
          onChange={(checked) => handleSwitchChange(record, checked)}
        />
      ),
    },
    {
      title: "操作",
      dataIndex: "id",
      render: (text, record) => (
        <>
          <Button onClick={() => handleEdit(record)}>编辑</Button>
          <Button
            type="primary"
            danger
            onClick={() => {
              handeldelgoodsclassify({ id: record.id });
            }}
          >
            删除
          </Button>
        </>
      ),
    },
  ];
  const handeldelgoodsclassify = async (id) => {
    try {
      const res = await delgoodsclassify(id);
      console.log(res.data);
      if (res.data.code===0) {
        // 使用过滤函数来删除对应的数据项
        const newData = data.filter((item) => item.id !== id);
        setData(newData);
        fetchData();
      }
    } catch (error) {
      console.error("Failed to delete goods:", error);
    }
  };

  const handleEdit = (record) => {
    setEditingItem(record);
    setEditedCateName(record.cateName);
    setEditedState(record.state === 1);
    setEditModalVisible(true);
    fetchData();
  };

  const handleSwitchChange = async (record, checked) => {
    try {
      const res = await editgoodsclassify({
        id: record.id,
        cateName: record.cateName,
        state: checked ? 1 : 0,
      });
      const updatedData = data.map((item) => {
        if (item.id === record.id) {
          return { ...item, state: checked ? 1 : 0 };
        }
        return item;
      });
      setData(updatedData);
      console.log(res.data);
    } catch (error) {
      console.error(error);
    }
  };

  const handleSaveEdit = async () => {
    try {
      let res = await editgoodsclassify({
        id: editingItem.id,
        cateName: editedCateName,
        state: editedState ? 1 : 0,
      });
      setEditModalVisible(false);
      console.log(res.data);
      fetchData();
    } catch (error) {
      console.error(error);
    }
  };

  const handleAddClassify = async () => {
    try {
      const res = await addgoodsclassify({
        cateName: editedCateName,
        state: editedState ? 1 : 0,
      });
      console.log(res.data);
      if (res.data.success) {
        const newData = [...data, res.data.data];
        setData(newData);
        fetchData();
        handleEdit(res.data.data); 
        fetchData();
        setEditModalVisible(false);

      }
    } catch (error) {
      console.error(error);
    }
  };

  
  const onChange = (pagination, filters, sorter, extra) => {
    console.log("params", pagination, filters, sorter, extra);
  };
  const fetchData = async () => {
    try {
      const res = await getGoodsClassify({ currentPage, pageSize });
      if (Array.isArray(res.data.data)) {
        setData(res.data.data);
        console.log(res.data);
      }
    } catch (error) {
      console.error(error);
    }
  };
  useEffect(() => {
    fetchData();
  }, [currentPage, pageSize]);

  return (
    <>
      <Title title="商品分类">
        <Button
          type="primary"
          slot="do"
          onClick={() => setEditModalVisible(true)}
        >
          添加分类
        </Button>
      </Title>

      <Table
      className="table1"
        columns={columns}
        dataSource={data}
        onChange={onChange}
        pagination={false}
      />

      <div className="page2">
        <Pagination
          current={currentPage}
          total={500}
          onChange={(page) => setCurrentPage(page)}
        />
      </div>

      <Modal
        // title="编辑分类"
        visible={editModalVisible}
        onOk={handleSaveEdit}
        onCancel={() => setEditModalVisible(false)}
      >
        <Input
          value={editedCateName}
          onChange={(e) => setEditedCateName(e.target.value)}
          placeholder="分类名称"
        />
        <Switch
          checked={editedState}
          onChange={(checked) => setEditedState(checked)}
          checkedChildren="启用"
          unCheckedChildren="禁用"
        />
        <Button onClick={handleAddClassify}>确认添加</Button>
      </Modal>
    </>
  );
};
export default GoodsSort;
